<template>
    <div>
         <div class="tools-view">
              <label class="title">{{title}}</label>
                <slot name="tools">
                </slot>
              <i class="el-icon-refresh-right" title="刷新" />
               <el-popover placement="right" width="0" trigger="click">
                <el-checkbox-group v-model="colOptions">
                    <el-checkbox v-for="(item,index) in columnList" :label="item.label" :key="index" ></el-checkbox>
                </el-checkbox-group>
                  <i slot="reference" class="el-icon-s-grid" title="设置列" />
            </el-popover>
            </div>
        <el-table
                :data="data"
                ref="refTable"
                @selection-change="handleSelectionChange"
                border
                height="100%"
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 100%;min-height:600px">
                <el-table-column 
                   v-if="sort"
                    prop="date"
                    align="center"
                    width="60"
                    label="序号">
                     <template slot-scope="scope">
                         {{scope.$index+1}}
                     </template>
                </el-table-column>
                <el-table-column 
                  v-if="selection"
                  type="selection"
                  width="55">
                </el-table-column>
                <template  v-for="(item,index) in columnList" >
                      <el-table-column    
                          :key="index"   
                          :prop="item.prop"  
                          align="center"
                          :label="item.label"
                          :min-width="item.width||'120'"
                          v-if="item.iStrue"
                        />
                </template>
                  <el-table-column
                   v-if="operation"
                   align="center"
                    :width="width"
                    fixed="right"
                    label="操作"
                    > 
                     <template slot-scope="scope">
                      <slot name="actions" :row="scope.row">
                      </slot>
                  </template>
                  </el-table-column>   
            </el-table>
              <el-pagination 
               v-if="page.total>0"
               style="text-align: right;padding:10px 0;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 30, 40,50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
              </el-pagination>
    </div>
</template>
<script>
  export default {
    props:{
        page:{
            type:[Object,Array],
            default:()=>{
              return {
                currentPage:1,
                pageSize:10,
                total:0
              }
            }
        },
        selection:{
          type:Boolean,
          default(){
            return false
          }
        },
        sort:{
          type:Boolean,
          default(){
            return true
          }
        },
        operation:{
          type:Boolean,
          default(){
            return true
          }
        },
        title:{
          type:String,
          default:'title'
        },
        width:{
          type:String,
          default:'80'
        },
        data:{
            type:Array,
            default:[]
        },
        columnList:{
            type:Array,
            default:[]
        }
    },
    data() {
      return {
       colOptions:[]
      };
    },
    watch: {
     colOptions(valArr) {
       this.columnList.map((item)=>{
        if(valArr.includes(item.label)){
          item.iStrue=true
        }else{
          item.iStrue =false
        }
        return item
       })
     }
   },
  mounted(){
    this.columnList.map((item)=>{
        this.colOptions.push(item.label)
    })
    },
    methods: {
      handleSizeChange(size){
         this.$emit('size-change',size)
      },
      handleCurrentChange(page){
          this.$emit('current-change',page)
      },
      handleSelectionChange(data){
        this.$emit('selection-change',data)
      }
    }
  }
</script>

<style lang="scss" scoped>
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }
  >i:hover{
    color:#1890ff;
  }
}

</style>